<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>子组件向父组件传递参数</title>
</head>

<body>
    <div id="app">
        <div>-------------父组件的内容----------</div>
        <h2>实例</h2>
        <h2>{{ msg }}</h2>
        <div>-------------子组件的内容----------</div>
        <!--    <comp v-on:btnclick="childrenBtnClick"></comp>-->
        <comp @btnclick="childrenBtnClick"></comp>
    </div>

    <template id="comp">
    <div>
        <h2>子组件标题</h2>
        <div>
            <button @click="onButtonClick(item)"
                    v-for="item in buttons">
                {{item.label}}
            </button>
        </div>
    </div>
</template>

    <script src="./vue.js"></script>
    <script>
        /**
         * 子组件向父组件传参
         *  当子组件向父组件传参的时候 我们需要用到自定义事件
         *  在子组件中使用 $emit("自定义事件名", 要向父组件传递的参数)来触发事件
         *  在父组件的子组件中 通过v-on来监听子组件的事件
         */

        //子组件
        Vue.component("comp", {
            template: "#comp",
            data: function() {
                return {
                    buttons: [{
                        id: 1,
                        label: "首页"
                    }, {
                        id: 2,
                        label: "购物车"
                    }, {
                        id: 3,
                        label: "订单列表"
                    }, {
                        id: 4,
                        label: "我的淘宝"
                    }, {
                        id: 5,
                        label: "更多"
                    }, ]
                }
            },
            methods: {
                onButtonClick(item) {
                    console.log(item);
                    this.$emit("btnclick", item)
                }
            }
        })

        //vue 实例1 root组件 (根组件)
        const app = new Vue({
            el: "#app",
            data: {
                msg: {}
            },
            methods: {
                childrenBtnClick(item) {
                    console.log("父组件中的监听事件被触发了==>", item);
                    this.msg = item;
                }
            }
        })
    </script>
</body>

</html>